<!-- build time:Sun Nov 24 2019 22:25:18 GMT+0800 (China Standard Time) --><!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><title>AngularJS的基本架构与相关概念 - Note?Note!</title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="description" content="Base Architecture of AngularJSOfficial diagram of introduction for AngularJS："><meta name="keywords" content="Angularjs,Directive,Filter,Module,Application"><meta property="og:type" content="article"><meta property="og:title" content="AngularJS的基本架构与相关概念"><meta property="og:url" content="http:&#x2F;&#x2F;www.borgor.cn&#x2F;2018-06-21&#x2F;124bd80f.html"><meta property="og:site_name" content="Note?Note!"><meta property="og:description" content="Base Architecture of AngularJSOfficial diagram of introduction for AngularJS："><meta property="og:locale" content="zh-CN"><meta property="og:image" content="https:&#x2F;&#x2F;imgs.borgor.cn&#x2F;imgs20190625083120.png"><meta property="og:updated_time" content="2019-11-19T05:54:13.544Z"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https:&#x2F;&#x2F;imgs.borgor.cn&#x2F;imgs20190625083120.png"><link rel="icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css"><link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/font-awesome/5.4.1/css/all.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.8/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/css/justifiedGallery.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/outdated-browser/1.1.5/outdatedbrowser.min.css"><link rel="stylesheet" href="/css/back-to-top.css"><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="//hm.baidu.com/hm.js?6cecff6d18ae0c22fd7ac294c80fe7c0";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}()</script><link rel="stylesheet" href="/css/progressbar.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><link rel="stylesheet" href="/css/style.css"></head><body class="is-2-column"><nav class="navbar navbar-main"><div class="container"><div class="navbar-brand is-flex-center"><a class="navbar-item navbar-logo" href="/"><img src="https://imgs.borgor.cn/imgs20190625111723.jpg" alt="AngularJS的基本架构与相关概念" height="28"></a></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item" href="/">首页</a> <a class="navbar-item" href="/archives">归档</a> <a class="navbar-item" href="/categories">分类</a> <a class="navbar-item" href="/tags">标签</a> <a class="navbar-item" href="/readinglist">书单</a></div><div class="navbar-end"><a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;" target="_blank" rel="noopener"><i class="fas fa-list-ul"></i> </a><a class="navbar-item search" title="搜索" href="javascript:;" target="_blank" rel="noopener"><i class="fas fa-search"></i></a></div></div></div></nav><section class="section"><div class="container"><div class="columns"><div class="column is-8-tablet is-9-desktop is-9-widescreen has-order-2 column-main"><div class="card"><div class="card-image"><span class="image is-7by1"><img class="thumbnail" src="https://imgs.borgor.cn/imgs20190625083120.png" alt="AngularJS的基本架构与相关概念"></span></div><div class="card-content article"><div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto"><div class="level-left"><time class="level-item has-text-grey" datetime="2018-06-21T03:37:35.000Z">2018-06-21</time><div class="level-item"><a class="has-link-grey -link" href="/categories/Development/">Development</a>&nbsp;/&nbsp;<a class="has-link-grey -link" href="/categories/Development/JavaScript/">JavaScript</a></div><span class="level-item has-text-grey">31 分钟 读完 (大约 4581 个字) </span><span class="level-item has-text-grey" id="busuanzi_container_page_pv"><i class="far fa-eye"></i> <span id="busuanzi_value_page_pv">0</span>次访问</span></div></div><h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">AngularJS的基本架构与相关概念</h1><div class="content"><h1 id="Base-Architecture-of-AngularJS"><a href="#Base-Architecture-of-AngularJS" class="headerlink" title="Base Architecture of AngularJS"></a>Base Architecture of AngularJS</h1><p>Official diagram of introduction for AngularJS：</p><a id="more"></a><p><img src="https://imgs.borgor.cn/imgs/imgs-AngularJS%E5%9F%BA%E7%A1%80%E6%9E%B6%E6%9E%84%E4%B8%8E%E7%9B%B8%E5%85%B3%E6%A6%82%E5%BF%B5-2019-6-25-10-58-22.png" alt></p><p>其中包括了一些主要的部分，列表如下：</p><table><thead><tr><th>Concept</th><th>Description</th></tr></thead><tbody><tr><td><a href="https://docs.angularjs.org/guide/concepts#template" target="_blank" rel="noopener">Template</a></td><td>HTML with additional markup</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#directive" target="_blank" rel="noopener">Directives</a></td><td>extend HTML with custom attributes and elements</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#model" target="_blank" rel="noopener">Model</a></td><td>the data shown to the user in the view and with which the user interacts</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#scope" target="_blank" rel="noopener">Scope</a></td><td>context where the model is stored so that controllers, directives and expressions can access it</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#expression" target="_blank" rel="noopener">Expressions</a></td><td>access variables and functions from the scope</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#compiler" target="_blank" rel="noopener">Compiler</a></td><td>parses the template and instantiates directives and expressions</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#filter" target="_blank" rel="noopener">Filter</a></td><td>formats the value of an expression for display to the user</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#view" target="_blank" rel="noopener">View</a></td><td>what the user sees (the DOM)</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#databinding" target="_blank" rel="noopener">Data Binding</a></td><td>sync data between the model and the view</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#controller" target="_blank" rel="noopener">Controller</a></td><td>the business logic behind views</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#di" target="_blank" rel="noopener">Dependency Injection</a></td><td>Creates and wires objects and functions</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#injector" target="_blank" rel="noopener">Injector</a></td><td>dependency injection container</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#module" target="_blank" rel="noopener">Module</a></td><td>a container for the different parts of an app including controllers, services, filters, directives which configures the Injector</td></tr><tr><td><a href="https://docs.angularjs.org/guide/concepts#service" target="_blank" rel="noopener">Service</a></td><td>reusable business logic independent of views</td></tr></tbody></table><h2 id="1-Module"><a href="#1-Module" class="headerlink" title="1. Module"></a>1. Module</h2><p>You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.</p><p>Most applications have a main method that instantiates and wires together the different parts of the application.</p><p>AngularJS apps don’t have a main method. Instead modules declaratively specify how an application should be bootstrapped. There are several advantages to this approach:</p><ul><li>The declarative process is easier to understand.</li><li>You can package code as reusable modules.</li><li>The modules can be loaded in any order (or even in parallel) because modules delay execution.</li><li>Unit tests only have to load relevant modules, which keeps them fast.</li><li>End-to-end tests can use modules to override configuration.</li></ul><h2 id="2-Scope"><a href="#2-Scope" class="headerlink" title="2. Scope"></a>2. Scope</h2><h3 id="2-1-Scope-characteristics"><a href="#2-1-Scope-characteristics" class="headerlink" title="2.1 Scope characteristics"></a>2.1 Scope characteristics</h3><ul><li><p>Scopes provide APIs (<a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch" target="_blank" rel="noopener">$watch</a>) to observe model mutations.</p></li><li><p>Scopes provide APIs (<a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply" target="_blank" rel="noopener">$apply</a>) to propagate any model changes through the system into the view from outside of the “AngularJS realm” (controllers, services, AngularJS event handlers).</p></li><li><p>Scopes can be nested to limit access to the properties of application components while providing access to shared model properties. Nested scopes are either “child scopes” or “isolate scopes”. A “child scope” (prototypically) inherits properties from its parent scope. An “isolate scope” does not. See <a href="https://docs.angularjs.org/guide/directive#isolating-the-scope-of-a-directive" target="_blank" rel="noopener">isolated scopes</a> for more information.</p></li><li><p>Scopes provide context against which <a href="https://docs.angularjs.org/guide/expression" target="_blank" rel="noopener">expressions</a> are evaluated. For example <code></code> expression is meaningless, unless it is evaluated against a specific scope which defines the <code>username</code> property.</p></li></ul><h3 id="2-2-Scope-as-Data-Model"><a href="#2-2-Scope-as-Data-Model" class="headerlink" title="2.2 Scope as Data-Model"></a>2.2 Scope as Data-Model</h3><p>Scope is the glue between application controller and the view. During the template <a href="https://docs.angularjs.org/guide/compiler" target="_blank" rel="noopener">linking</a> phase the <a href="https://docs.angularjs.org/api/ng/provider/$compileProvider#directive" target="_blank" rel="noopener">directives</a> set up <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch" target="_blank" rel="noopener"><code>$watch</code></a> expressions on the scope. The <code>$watch</code> allows the directives to be notified of property changes, which allows the directive to render the updated value to the DOM.</p><p>Both controllers and directives have reference to the scope, but not to each other. This arrangement isolates the controller from the directive as well as from the DOM. This is an important point since it makes the controllers view agnostic, which greatly improves the testing story of the applications.</p><figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">angular.module(<span class="hljs-string">'scopeExample'</span>, [])</span><br><span class="line">.controller(<span class="hljs-string">'MyController'</span>, [<span class="hljs-string">'$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$scope</span>) </span>&#123;</span><br><span class="line">  $scope.username = <span class="hljs-string">'World'</span>;</span><br><span class="line"></span><br><span class="line">  $scope.sayHello = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="line">    $scope.greeting = <span class="hljs-string">'Hello '</span> + $scope.username + <span class="hljs-string">'!'</span>;</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;]);</span><br></pre></td></tr></table></figure><figure class="highlight html hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ng-controller</span>=<span class="hljs-string">"MyController"</span>&gt;</span></span><br><span class="line">  Your name:</span><br><span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">ng-model</span>=<span class="hljs-string">"username"</span>&gt;</span></span><br><span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">ng-click</span>=<span class="hljs-string">'sayHello()'</span>&gt;</span>greet<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span></span><br><span class="line">  &#123;&#123;greeting&#125;&#125;</span><br><span class="line"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p>In the above example notice that the <code>MyController</code> assigns <code>World</code> to the <code>username</code> property of the scope. The scope then notifies the <code>input</code> of the assignment, which then renders the input with username pre-filled. This demonstrates how a controller can write data into the scope.</p><p>Similarly the controller can assign behavior to scope as seen by the <code>sayHello</code> method, which is invoked when the user clicks on the ‘greet’ button. The <code>sayHello</code> method can read the <code>username</code> property and create a <code>greeting</code> property. This demonstrates that the properties on scope update automatically when they are bound to HTML input widgets.</p><p>Logically the rendering of <code></code> involves:</p><ul><li>retrieval of the scope associated with DOM node where <code></code> is defined in template. In this example this is the same scope as the scope which was passed into <code>MyController</code>. (We will discuss scope hierarchies later.)</li><li>Evaluate the <code>greeting</code> <a href="https://docs.angularjs.org/guide/expression" target="_blank" rel="noopener">expression</a> against the scope retrieved above, and assign the result to the text of the enclosing DOM element.</li></ul><p>You can think of the scope and its properties as the data which is used to render the view. The scope is the single source-of-truth for all things view related.</p><p>From a testability point of view, the separation of the controller and the view is desirable, because it allows us to test the behavior without being distracted by the rendering details.</p><figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">it(<span class="hljs-string">'should say hello'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="line">  <span class="hljs-keyword">var</span> scopeMock = &#123;&#125;;</span><br><span class="line">  <span class="hljs-keyword">var</span> cntl = <span class="hljs-keyword">new</span> MyController(scopeMock);</span><br><span class="line"></span><br><span class="line">  <span class="hljs-comment">// Assert that username is pre-filled</span></span><br><span class="line">  expect(scopeMock.username).toEqual(<span class="hljs-string">'World'</span>);</span><br><span class="line"></span><br><span class="line">  <span class="hljs-comment">// Assert that we read new username and greet</span></span><br><span class="line">  scopeMock.username = <span class="hljs-string">'angular'</span>;</span><br><span class="line">  scopeMock.sayHello();</span><br><span class="line">  expect(scopeMock.greeting).toEqual(<span class="hljs-string">'Hello angular!'</span>);</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure><h3 id="2-3-Scope-Hierarchies"><a href="#2-3-Scope-Hierarchies" class="headerlink" title="2.3 Scope Hierarchies"></a>2.3 Scope Hierarchies</h3><p>Each AngularJS application has exactly one <a href="https://docs.angularjs.org/api/ng/service/$rootScope" target="_blank" rel="noopener">root scope</a>, but may have any number of child scopes.</p><p>The application can have multiple scopes, because <a href="https://docs.angularjs.org/guide/directive" target="_blank" rel="noopener">directives</a> can create new child scopes. When new scopes are created, they are added as children of their parent scope. This creates a tree structure which parallels the DOM where they’re attached.</p><p>The section <a href="https://docs.angularjs.org/guide/scope#directives-that-create-scopes" target="_blank" rel="noopener">Directives that Create Scopes</a> has more info about which directives create scopes.</p><p>When AngularJS evaluates <code></code>, it first looks at the scope associated with the given element for the <code>name</code> property. If no such property is found, it searches the parent scope and so on until the root scope is reached. In JavaScript this behavior is known as prototypical inheritance, and child scopes prototypically inherit from their parents.</p><p>This example illustrates scopes in application, and prototypical inheritance of properties. The example is followed by a diagram depicting the scope boundaries.</p><p><img src="https://imgs.borgor.cn/imgs/imgs-AngularJS%E5%9F%BA%E7%A1%80%E6%9E%B6%E6%9E%84%E4%B8%8E%E7%9B%B8%E5%85%B3%E6%A6%82%E5%BF%B5-2019-6-25-11-1-11.png" alt></p><h3 id="2-4-Scope-Life-Cycle"><a href="#2-4-Scope-Life-Cycle" class="headerlink" title="2.4 Scope Life Cycle"></a>2.4 Scope Life Cycle</h3><p>The normal flow of a browser receiving an event is that it executes a corresponding JavaScript callback. Once the callback completes the browser re-renders the DOM and returns to waiting for more events.</p><p>When the browser calls into JavaScript the code executes outside the AngularJS execution context, which means that AngularJS is unaware of model modifications. To properly process model modifications the execution has to enter the AngularJS execution context using the <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply" target="_blank" rel="noopener"><code>$apply</code></a> method. Only model modifications which execute inside the <code>$apply</code> method will be properly accounted for by AngularJS. For example if a directive listens on DOM events, such as <a href="https://docs.angularjs.org/api/ng/directive/ngClick" target="_blank" rel="noopener"><code>ng-click</code></a> it must evaluate the expression inside the <code>$apply</code>method.</p><p>After evaluating the expression, the <code>$apply</code> method performs a <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest" target="_blank" rel="noopener"><code>$digest</code></a>. In the $digest phase the scope examines all of the <code>$watch</code>expressions and compares them with the previous value. This dirty checking is done asynchronously. This means that assignment such as <code>$scope.username=&quot;angular&quot;</code> will not immediately cause a <code>$watch</code> to be notified, instead the <code>$watch</code> notification is delayed until the <code>$digest</code> phase. This delay is desirable, since it coalesces multiple model updates into one <code>$watch</code> notification as well as guarantees that during the <code>$watch</code> notification no other <code>$watch</code>es are running. If a <code>$watch</code> changes the value of the model, it will force additional<code>$digest</code> cycle.</p><ol><li><p><strong>Creation</strong></p><p>The <a href="https://docs.angularjs.org/api/ng/service/$rootScope" target="_blank" rel="noopener">root scope</a> is created during the application bootstrap by the <a href="https://docs.angularjs.org/api/auto/service/$injector" target="_blank" rel="noopener">$injector</a>. During template linking, some directives create new child scopes.</p></li><li><p><strong>Watcher registration</strong></p><p>During template linking, directives register <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch" target="_blank" rel="noopener">watches</a> on the scope. These watches will be used to propagate model values to the DOM.</p></li><li><p><strong>Model mutation</strong></p><p>For mutations to be properly observed, you should make them only within the <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply" target="_blank" rel="noopener">scope.$apply()</a>. AngularJS APIs do this implicitly, so no extra <code>$apply</code> call is needed when doing synchronous work in controllers, or asynchronous work with <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank" rel="noopener">$http</a>, <a href="https://docs.angularjs.org/api/ng/service/$timeout" target="_blank" rel="noopener">$timeout</a> or <a href="https://docs.angularjs.org/api/ng/service/$interval" target="_blank" rel="noopener">$interval</a>services.</p></li><li><p><strong>Mutation observation</strong></p><p>At the end of <code>$apply</code>, AngularJS performs a <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest" target="_blank" rel="noopener">$digest</a> cycle on the root scope, which then propagates throughout all child scopes. During the <code>$digest</code> cycle, all <code>$watch</code>ed expressions or functions are checked for model mutation and if a mutation is detected, the <code>$watch</code> listener is called.</p></li><li><p><strong>Scope destruction</strong></p><p>When child scopes are no longer needed, it is the responsibility of the child scope creator to destroy them via <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$destroy" target="_blank" rel="noopener">scope.$destroy()</a> API. This will stop propagation of <code>$digest</code> calls into the child scope and allow for memory used by the child scope models to be reclaimed by the garbage collector.</p></li></ol><h2 id="3-Controller"><a href="#3-Controller" class="headerlink" title="3. Controller"></a>3. Controller</h2><p>In AngularJS, a Controller is defined by a JavaScript <strong>constructor function</strong> that is used to augment the <a href="https://docs.angularjs.org/guide/scope" target="_blank" rel="noopener">AngularJS Scope</a>.</p><p>Controllers can be attached to the DOM in different ways. For each of them, AngularJS will instantiate a new Controller object, using the specified Controller’s <strong>constructor function</strong>:</p><ul><li>the <a href="https://docs.angularjs.org/api/ng/directive/ngController" target="_blank" rel="noopener">ngController</a> directive. A new <strong>child scope</strong> will be created and made available as an injectable parameter to the Controller’s constructor function as <code>$scope</code>.</li><li>a route controller in a <a href="https://docs.angularjs.org/api/ngRoute/provider/$routeProvider" target="_blank" rel="noopener">$route definition</a>.</li><li>the controller of a <a href="https://docs.angularjs.org/guide/directive" target="_blank" rel="noopener">regular directive</a>, or a <a href="https://docs.angularjs.org/guide/component" target="_blank" rel="noopener">component directive</a>.</li></ul><p>If the controller has been attached using the <code>controller as</code> syntax then the controller instance will be assigned to a property on the scope.</p><p>Use controllers to:</p><ul><li>Set up the initial state of the <code>$scope</code> object.</li><li>Add behavior to the <code>$scope</code> object.</li></ul><p>Do not use controllers to:</p><ul><li>Manipulate DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. AngularJS has <a href="https://docs.angularjs.org/guide/databinding" target="_blank" rel="noopener">databinding</a> for most cases and <a href="https://docs.angularjs.org/guide/directive" target="_blank" rel="noopener">directives</a> to encapsulate manual DOM manipulation.</li><li>Format input — Use <a href="https://docs.angularjs.org/guide/forms" target="_blank" rel="noopener">AngularJS form controls</a> instead.</li><li>Filter output — Use <a href="https://docs.angularjs.org/guide/filter" target="_blank" rel="noopener">AngularJS filters</a> instead.</li><li>Share code or state across controllers — Use <a href="https://docs.angularjs.org/guide/services" target="_blank" rel="noopener">AngularJS services</a> instead.</li><li>Manage the life-cycle of other components (for example, to create service instances).</li></ul><p>In general, a Controller shouldn’t try to do too much. It should contain only the business logic needed for a single view.</p><p>The most common way to keep Controllers slim is by encapsulating work that doesn’t belong to controllers into services and then using these services in Controllers via dependency injection. This is discussed in the <a href="https://docs.angularjs.org/guide/di" target="_blank" rel="noopener">Dependency Injection</a> and <a href="https://docs.angularjs.org/guide/services" target="_blank" rel="noopener">Services</a> sections of this guide.</p><h2 id="4-Directive"><a href="#4-Directive" class="headerlink" title="4. Directive"></a>4. Directive</h2><p>At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s <strong>HTML compiler</strong> (<a href="https://docs.angularjs.org/api/ng/service/$compile" target="_blank" rel="noopener"><code>$compile</code></a>) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.</p><p>AngularJS comes with a set of these directives built-in, like <code>ngBind</code>, <code>ngModel</code>, and <code>ngClass</code>. Much like you create controllers and services, you can create your own directives for AngularJS to use. When AngularJS <a href="https://docs.angularjs.org/guide/bootstrap" target="_blank" rel="noopener">bootstraps</a> your application, the <a href="https://docs.angularjs.org/guide/compiler" target="_blank" rel="noopener">HTML compiler</a>traverses the DOM matching directives against the DOM elements.</p><h3 id="4-1-Creating-Directives"><a href="#4-1-Creating-Directives" class="headerlink" title="4.1 Creating Directives"></a>4.1 Creating Directives</h3><p>First let’s talk about the <a href="https://docs.angularjs.org/api/ng/provider/$compileProvider#directive" target="_blank" rel="noopener">API for registering directives</a>. Much like controllers, directives are registered on modules. To register a directive, you use the <code>module.directive</code> API. <code>module.directive</code> takes the <a href="https://docs.angularjs.org/guide/directive#matching-directives" target="_blank" rel="noopener">normalized</a> directive name followed by a <strong>factory function.</strong> This factory function should return an object with the different options to tell <code>$compile</code> how the directive should behave when matched.</p><p>The factory function is invoked only once when the <a href="https://docs.angularjs.org/api/ng/service/$compile" target="_blank" rel="noopener">compiler</a> matches the directive for the first time. You can perform any initialization work here. The function is invoked using <a href="https://docs.angularjs.org/api/auto/service/$injector#invoke" target="_blank" rel="noopener">$injector.invoke</a> which makes it injectable just like a controller.</p><p>We’ll go over a few common examples of directives, then dive deep into the different options and compilation process.</p><blockquote><p><strong>Best Practice:</strong> In order to avoid collisions with some future standard, it’s best to prefix your own directive names. For instance, if you created a <code>&lt;carousel&gt;</code> directive, it would be problematic if HTML7 introduced the same element. A two or three letter prefix (e.g. <code>btfCarousel</code>) works well. Similarly, do not prefix your own directives with <code>ng</code> or they might conflict with directives included in a future version of AngularJS.</p></blockquote><p>For the following examples, we’ll use the prefix <code>my</code> (e.g. <code>myCustomer</code>).</p><p>For the following examples, we’ll use the prefix <code>my</code> (e.g. <code>myCustomer</code>).</p><h3 id="Template-expanding-directive"><a href="#Template-expanding-directive" class="headerlink" title="Template-expanding directive"></a>Template-expanding directive</h3><p>Let’s say you have a chunk of your template that represents a customer’s information. This template is repeated many times in your code. When you change it in one place, you have to change it in several others. This is a good opportunity to use a directive to simplify your template.</p><p>Let’s create a directive that simply replaces its contents with a static template:</p><figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">angular.module(<span class="hljs-string">'docsSimpleDirective'</span>, [])</span><br><span class="line">.controller(<span class="hljs-string">'Controller'</span>, [<span class="hljs-string">'$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$scope</span>) </span>&#123;</span><br><span class="line">  $scope.customer = &#123;</span><br><span class="line">    name: <span class="hljs-string">'Naomi'</span>,</span><br><span class="line">    address: <span class="hljs-string">'1600 Amphitheatre'</span></span><br><span class="line">  &#125;;</span><br><span class="line">&#125;])</span><br><span class="line">.directive(<span class="hljs-string">'myCustomer'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="line">  <span class="hljs-keyword">return</span> &#123;</span><br><span class="line">    template: <span class="hljs-string">'Name: &#123;&#123;customer.name&#125;&#125; Address: &#123;&#123;customer.address&#125;&#125;'</span></span><br><span class="line">  &#125;;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><figure class="highlight html hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ng-controller</span>=<span class="hljs-string">"Controller"</span>&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">my-customer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p>Notice that we have bindings in this directive. After <code>$compile</code> compiles and links <code>&lt;div my-customer&gt;&lt;/div&gt;</code>, it will try to match directives on the element’s children. This means you can compose directives of other directives. We’ll see how to do that in <a href="https://docs.angularjs.org/guide/directive#creating-directives-that-communicate" target="_blank" rel="noopener">an example</a>below.</p><p>In the example above we in-lined the value of the <code>template</code> option, but this will become annoying as the size of your template grows.</p><blockquote><p><strong>Best Practice:</strong> Unless your template is very small, it’s typically better to break it apart into its own HTML file and load it with the <code>templateUrl</code> option.</p></blockquote><p>If you are familiar with <code>ngInclude</code>, <code>templateUrl</code> works just like it. Here’s the same example using <code>templateUrl</code> instead:</p><figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">angular.module(<span class="hljs-string">'docsTemplateUrlDirective'</span>, [])</span><br><span class="line">.controller(<span class="hljs-string">'Controller'</span>, [<span class="hljs-string">'$scope'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$scope</span>) </span>&#123;</span><br><span class="line">  $scope.customer = &#123;</span><br><span class="line">    name: <span class="hljs-string">'Naomi'</span>,</span><br><span class="line">    address: <span class="hljs-string">'1600 Amphitheatre'</span></span><br><span class="line">  &#125;;</span><br><span class="line">&#125;])</span><br><span class="line">.directive(<span class="hljs-string">'myCustomer'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="line">  <span class="hljs-keyword">return</span> &#123;</span><br><span class="line">    templateUrl: <span class="hljs-string">'my-customer.html'</span></span><br><span class="line">  &#125;;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><figure class="highlight html hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ng-controller</span>=<span class="hljs-string">"Controller"</span>&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">my-customer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight html hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Name: &#123;&#123;customer.name&#125;&#125; Address: &#123;&#123;customer.address&#125;&#125;</span><br></pre></td></tr></table></figure><p><code>templateUrl</code> can also be a function which returns the URL of an HTML template to be loaded and used for the directive. AngularJS will call the <code>templateUrl</code> function with two parameters: the element that the directive was called on, and an <code>attr</code> object associated with that element.</p><blockquote><p>The <code>restrict</code> option is typically set to:</p><ul><li><code>&#39;A&#39;</code> - only matches attribute name</li><li><code>&#39;E&#39;</code> - only matches element name</li><li><code>&#39;C&#39;</code> - only matches class name</li><li><code>&#39;M&#39;</code> - only matches comment</li></ul><p>These restrictions can all be combined as needed:</p><ul><li><code>&#39;AEC&#39;</code> - matches either attribute or element or class name</li></ul><p>Let’s change our directive to use <code>restrict: &#39;E&#39;</code>:</p></blockquote><h2 id="6-Filter"><a href="#6-Filter" class="headerlink" title="6. Filter"></a>6. Filter</h2><p>Filters format the value of an expression for display to the user. They can be used in view templates, controllers or services. AngularJS comes with a collection of <a href="https://docs.angularjs.org/api/ng/filter" target="_blank" rel="noopener">built-in filters</a>, but it is easy to define your own as well.</p><p>The underlying API is the <a href="https://docs.angularjs.org/api/ng/provider/$filterProvider" target="_blank" rel="noopener"><code>$filterProvider</code></a>.</p><p>Using filters in view templates</p><p>Filters can be applied to expressions in view templates using the following syntax:</p><figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123; expression | filter &#125;&#125;</span><br></pre></td></tr></table></figure><p>E.g. the markup</p><figure class="highlight plain hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123; 12 | currency &#125;&#125;</span><br></pre></td></tr></table></figure><p>formats the number 12 as a currency using the <a href="https://docs.angularjs.org/api/ng/filter/currency" target="_blank" rel="noopener"><code>currency</code></a> filter. The resulting value is <code>$12.00</code>.</p><p>Filters can be applied to the result of another filter. This is called “chaining” and uses the following syntax:</p><figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123; expression | filter1 | filter2 | ... &#125;&#125;</span><br></pre></td></tr></table></figure><p>Filters may have arguments. The syntax for this is</p><figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123; expression | filter:argument1:argument2:... &#125;&#125;</span><br></pre></td></tr></table></figure><p>E.g. the markup</p><figure class="highlight plain hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123; 1234 | number:2 &#125;&#125;</span><br></pre></td></tr></table></figure><p>formats the number 1234 with 2 decimal points using the <a href="https://docs.angularjs.org/api/ng/filter/number" target="_blank" rel="noopener"><code>number</code></a> filter. The resulting value is <code>1,234.00</code>.</p><hr><h3 id="When-filters-are-executed"><a href="#When-filters-are-executed" class="headerlink" title="When filters are executed"></a>When filters are executed</h3><p>In templates, filters are only executed when their inputs have changed. This is more performant than executing a filter on each <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest" target="_blank" rel="noopener"><code>$digest</code></a> as is the case with <a href="https://docs.angularjs.org/guide/expression" target="_blank" rel="noopener">expressions</a>.</p><p>There are two exceptions to this rule:</p><ol><li>In general, this applies only to filters that take <a href="https://developer.mozilla.org/docs/Glossary/Primitive" target="_blank" rel="noopener">primitive values</a> as inputs. Filters that receive <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Objects" target="_blank" rel="noopener">Objects</a> as input are executed on each <code>$digest</code>, as it would be too costly to track if the inputs have changed.</li><li>Filters that are marked as <code>$stateful</code> are also executed on each \$digest. See <a href="https://docs.angularjs.org/guide/filter#stateful-filters" target="_blank" rel="noopener">Stateful filters</a> for more information. Note that no AngularJS core filters are $stateful.</li></ol><h3 id="Filter-components-in-ng"><a href="#Filter-components-in-ng" class="headerlink" title="Filter components in ng"></a>Filter components in <code>ng</code></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><a href="https://docs.angularjs.org/api/ng/filter/filter" target="_blank" rel="noopener">filter</a></td><td>Selects a subset of items from <code>array</code> and returns it as a new array.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/filter/currency" target="_blank" rel="noopener">currency</a></td><td>Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default symbol for current locale is used.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/filter/number" target="_blank" rel="noopener">number</a></td><td>Formats a number as text.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/filter/date" target="_blank" rel="noopener">date</a></td><td>Formats <code>date</code> to a string based on the requested <code>format</code>.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/filter/json" target="_blank" rel="noopener">json</a></td><td>Allows you to convert a JavaScript object into JSON string.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/filter/lowercase" target="_blank" rel="noopener">lowercase</a></td><td>Converts string to lowercase.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/filter/uppercase" target="_blank" rel="noopener">uppercase</a></td><td>Converts string to uppercase.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/filter/limitTo" target="_blank" rel="noopener">limitTo</a></td><td>Creates a new array or string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array, string or number, as specified by the value and sign (positive or negative) of <code>limit</code>. Other array-like objects are also supported (e.g. array subclasses, NodeLists, jqLite/jQuery collections etc). If a number is used as input, it is converted to a string.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/filter/orderBy" target="_blank" rel="noopener">orderBy</a></td><td>Returns an array containing the items from the specified <code>collection</code>, ordered by a <code>comparator</code> function based on the values computed using the <code>expression</code> predicate.</td></tr></tbody></table><h2 id="7-Service"><a href="#7-Service" class="headerlink" title="7. Service"></a>7. Service</h2><h3 id="Service-components-in-ng"><a href="#Service-components-in-ng" class="headerlink" title="Service components in ng"></a>Service components in <code>ng</code></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><a href="https://docs.angularjs.org/api/ng/service/$anchorScroll" target="_blank" rel="noopener">$anchorScroll</a></td><td>When called, it scrolls to the element related to the specified <code>hash</code> or (if omitted) to the current value of <a href="https://docs.angularjs.org/api/ng/service/$location#hash" target="_blank" rel="noopener">$location.hash()</a>, according to the rules specified in the <a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#an-indicated-part-of-the-document" target="_blank" rel="noopener">HTML5 spec</a>.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$animate" target="_blank" rel="noopener">$animate</a></td><td>The $animate service exposes a series of DOM utility methods that provide support for animation hooks. The default behavior is the application of DOM operations, however, when an animation is detected (and animations are enabled), $animate will do the heavy lifting to ensure that animation runs with the triggered DOM operation.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$animateCss" target="_blank" rel="noopener">$animateCss</a></td><td>This is the core version of <code>$animateCss</code>. By default, only when the <code>ngAnimate</code> is included, then the <code>$animateCss</code> service will actually perform animations.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$cacheFactory" target="_blank" rel="noopener">$cacheFactory</a></td><td>Factory that constructs <a href="https://docs.angularjs.org/api/ng/type/$cacheFactory.Cache" target="_blank" rel="noopener">Cache</a> objects and gives access to them.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$templateCache" target="_blank" rel="noopener">$templateCache</a></td><td><code>$templateCache</code> is a <a href="https://docs.angularjs.org/api/ng/type/$cacheFactory.Cache" target="_blank" rel="noopener">Cache object</a> created by the <a href="https://docs.angularjs.org/api/ng/service/$cacheFactory" target="_blank" rel="noopener">$cacheFactory</a>.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$compile" target="_blank" rel="noopener">$compile</a></td><td>Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope" target="_blank" rel="noopener"><code>scope</code></a> and the template together.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$controller" target="_blank" rel="noopener">$controller</a></td><td><code>$controller</code> service is responsible for instantiating controllers.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$document" target="_blank" rel="noopener">$document</a></td><td>A <a href="https://docs.angularjs.org/api/ng/function/angular.element" target="_blank" rel="noopener">jQuery or jqLite</a> wrapper for the browser’s <code>window.document</code> object.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$exceptionHandler" target="_blank" rel="noopener">$exceptionHandler</a></td><td>Any uncaught exception in AngularJS expressions is delegated to this service. The default implementation simply delegates to <code>$log.error</code> which logs it into the browser console.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$filter" target="_blank" rel="noopener">$filter</a></td><td>Filters are used for formatting data displayed to the user.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$httpParamSerializer" target="_blank" rel="noopener">$httpParamSerializer</a></td><td>Default <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank" rel="noopener"><code>$http</code></a> params serializer that converts objects to strings according to the following rules:</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$httpParamSerializerJQLike" target="_blank" rel="noopener">$httpParamSerializerJQLike</a></td><td>Alternative <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank" rel="noopener"><code>$http</code></a> params serializer that follows jQuery’s <a href="http://api.jquery.com/jquery.param/" target="_blank" rel="noopener"><code>param()</code></a> method logic. The serializer will also sort the params alphabetically.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank" rel="noopener">$http</a></td><td>The <code>$http</code> service is a core AngularJS service that facilitates communication with the remote HTTP servers via the browser’s <a href="https://developer.mozilla.org/en/xmlhttprequest" target="_blank" rel="noopener">XMLHttpRequest</a> object or via <a href="http://en.wikipedia.org/wiki/JSONP" target="_blank" rel="noopener">JSONP</a>.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$xhrFactory" target="_blank" rel="noopener">$xhrFactory</a></td><td>Factory function used to create XMLHttpRequest objects.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$httpBackend" target="_blank" rel="noopener">$httpBackend</a></td><td>HTTP backend used by the <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank" rel="noopener">service</a> that delegates to XMLHttpRequest object or JSONP and deals with browser incompatibilities.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$interpolate" target="_blank" rel="noopener">$interpolate</a></td><td>Compiles a string with markup into an interpolation function. This service is used by the HTML <a href="https://docs.angularjs.org/api/ng/service/$compile" target="_blank" rel="noopener">$compile</a>service for data binding. See <a href="https://docs.angularjs.org/api/ng/provider/$interpolateProvider" target="_blank" rel="noopener">$interpolateProvider</a> for configuring the interpolation markup.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$interval" target="_blank" rel="noopener">$interval</a></td><td>AngularJS’s wrapper for <code>window.setInterval</code>. The <code>fn</code> function is executed every <code>delay</code>milliseconds.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$jsonpCallbacks" target="_blank" rel="noopener">$jsonpCallbacks</a></td><td>This service handles the lifecycle of callbacks to handle JSONP requests. Override this service if you wish to customise where the callbacks are stored and how they vary compared to the requested url.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$locale" target="_blank" rel="noopener">$locale</a></td><td>$locale service provides localization rules for various AngularJS components. As of right now the only public api is:</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$location" target="_blank" rel="noopener">$location</a></td><td>The $location service parses the URL in the browser address bar (based on the <a href="https://developer.mozilla.org/en/window.location" target="_blank" rel="noopener">window.location</a>) and makes the URL available to your application. Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$log" target="_blank" rel="noopener">$log</a></td><td>Simple service for logging. Default implementation safely writes the message into the browser’s console (if present).</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$parse" target="_blank" rel="noopener">$parse</a></td><td>Converts AngularJS <a href="https://docs.angularjs.org/guide/expression" target="_blank" rel="noopener">expression</a> into a function.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$q" target="_blank" rel="noopener">$q</a></td><td>A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$rootElement" target="_blank" rel="noopener">$rootElement</a></td><td>The root element of AngularJS application. This is either the element where <a href="https://docs.angularjs.org/api/ng/directive/ngApp" target="_blank" rel="noopener">ngApp</a> was declared or the element passed into <a href="https://docs.angularjs.org/api/ng/function/angular.bootstrap" target="_blank" rel="noopener"><code>angular.bootstrap</code></a>. The element represents the root element of application. It is also the location where the application’s <a href="https://docs.angularjs.org/api/auto/service/$injector" target="_blank" rel="noopener">$injector</a> service gets published, and can be retrieved using <code>$rootElement.injector()</code>.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$rootScope" target="_blank" rel="noopener">$rootScope</a></td><td>Every application has a single root <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope" target="_blank" rel="noopener">scope</a>. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility. See the <a href="https://docs.angularjs.org/guide/scope" target="_blank" rel="noopener">developer guide on scopes</a>.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$sceDelegate" target="_blank" rel="noopener">$sceDelegate</a></td><td><code>$sceDelegate</code> is a service that is used by the <code>$sce</code> service to provide <a href="https://docs.angularjs.org/api/ng/service/$sce" target="_blank" rel="noopener">Strict Contextual Escaping (SCE)</a> services to AngularJS.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$sce" target="_blank" rel="noopener">$sce</a></td><td><code>$sce</code> is a service that provides Strict Contextual Escaping services to AngularJS.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$templateRequest" target="_blank" rel="noopener">$templateRequest</a></td><td>The <code>$templateRequest</code> service runs security checks then downloads the provided template using<code>$http</code> and, upon success, stores the contents inside of <code>$templateCache</code>. If the HTTP request fails or the response data of the HTTP request is empty, a <code>$compile</code> error will be thrown (the exception can be thwarted by setting the 2nd parameter of the function to true). Note that the contents of <code>$templateCache</code> are trusted, so the call to <code>$sce.getTrustedUrl(tpl)</code> is omitted when <code>tpl</code> is of type string and <code>$templateCache</code> has the matching entry.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$timeout" target="_blank" rel="noopener">$timeout</a></td><td>AngularJS’s wrapper for <code>window.setTimeout</code>. The <code>fn</code> function is wrapped into a try/catch block and delegates any exceptions to <a href="https://docs.angularjs.org/api/ng/service/$exceptionHandler" target="_blank" rel="noopener">$exceptionHandler</a> service.</td></tr><tr><td><a href="https://docs.angularjs.org/api/ng/service/$window" target="_blank" rel="noopener">$window</a></td><td>A reference to the browser’s <code>window</code> object. While <code>window</code> is globally available in JavaScript, it causes testability problems, because it is a global variable. In AngularJS we always refer to it through the<code>$window</code> service, so it may be overridden, removed or mocked for testing.</td></tr></tbody></table><h1 id="More"><a href="#More" class="headerlink" title="More"></a>More</h1><p><a href="https://docs.angularjs.org/guide/" target="_blank" rel="noopener">Guide to AngularJS Documentation</a></p><div><h1>推荐文章<span style="font-size:.45em;color:gray">（由<a href="https://github.com/huiwang/hexo-recommended-posts" target="_blank" rel="noopener">hexo文章推荐插件</a>驱动）</span></h1><ul><li><a href="http://www.borgor.cn/2018-07-04/5e5f1d48.html">AngularJS框架简介</a></li></ul></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css"></div><div class="level is-size-7 is-uppercase"><div class="level-start"><div class="level-item"><span class="is-size-6 has-text-grey has-mr-7">#</span> <a class="has-link-grey -link" href="/tags/Angularjs/" rel="tag">Angularjs</a>, <a class="has-link-grey -link" href="/tags/Application/" rel="tag">Application</a>, <a class="has-link-grey -link" href="/tags/Directive/" rel="tag">Directive</a>, <a class="has-link-grey -link" href="/tags/Filter/" rel="tag">Filter</a>, <a class="has-link-grey -link" href="/tags/Module/" rel="tag">Module</a></div></div></div></div></div><div class="card"><div class="card-content"><h3 class="menu-label has-text-centered">喜欢这篇文章？打赏一下作者吧</h3><div class="buttons is-centered"><a class="button is-info donate"><span class="icon is-small"><i class="fab fa-alipay"></i> </span><span>支付宝</span><div class="qrcode"><img src="https://imgs.borgor.cn/imgs20190628231540.png" alt="支付宝"></div></a><a class="button is-success donate"><span class="icon is-small"><i class="fab fa-weixin"></i> </span><span>微信</span><div class="qrcode"><img src="https://imgs.borgor.cn/imgs20190628231554.png" alt="微信"></div></a></div></div></div><div class="card card-transparent"><div class="level post-navigation is-flex-wrap is-mobile"><div class="level-start"><a class="level level-item has-link-grey article-nav-prev" href="/2018-06-27/db275d8a.html"><i class="level-item fas fa-chevron-left"></i> <span class="level-item">JavaScript性能优化</span></a></div><div class="level-end"><a class="level level-item has-link-grey article-nav-next" href="/2018-06-20/4e5ff57d.html"><span class="level-item">Django中的中间件机制</span> <i class="level-item fas fa-chevron-right"></i></a></div></div></div><div class="card"><div class="card-content"><h3 class="title is-5 has-text-weight-normal">评论</h3><div id="valine-thread" class="content"></div><script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="//unpkg.com/valine/dist/Valine.min.js"></script><script>new Valine({el:"#valine-thread",notify:!1,verify:!1,app_id:"ybhyfHG9S4TQhIvstdj5pprw-gzGzoHsz",app_key:"ob8A13IBceQXqd8g92nUgNMx",placeholder:"你有想说的么？"})</script></div></div></div><div class="column is-4-tablet is-3-desktop is-3-widescreen has-order-1 column-left"><div class="card widget"><div class="card-content"><nav class="level"><div class="level-item has-text-centered"><div><figure class="image is-128x128 has-mb-6"><img class="is-rounded" src="https://imgs.borgor.cn/imgs20190625111723.jpg" alt="BorGor"></figure><p class="is-size-4 is-block">BorGor</p><p class="is-size-6 is-block">Note?Note!</p><p class="is-size-6 is-flex is-flex-center has-text-grey"><i class="fas fa-map-marker-alt has-mr-7"></i> <span>Lanzhou.Gansu</span></p></div></div></nav><nav class="level is-mobile"><div class="level-item has-text-centered is-marginless"><div><p class="heading">文章</p><p class="title has-text-weight-normal">86</p></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">分类</p><p class="title has-text-weight-normal">26</p></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">标签</p><p class="title has-text-weight-normal">153</p></div></div></nav><div class="level"><a class="level-item button is-link is-rounded" href="/" target="_blank">关注我</a></div><div class="level is-mobile"><a class="level-item button is-white is-marginless" target="_blank" title="Github" href="https://github.com/cyrusky"><i class="fab fa-github"></i></a></div></div></div><div class="card widget" id="toc"><div class="card-content"><div class="menu"><h3 class="menu-label">目录</h3><ul class="menu-list"><li><a class="is-flex" href="#Base-Architecture-of-AngularJS"><span class="has-mr-6">1</span> <span>Base Architecture of AngularJS</span></a><ul class="menu-list"><li><a class="is-flex" href="#1-Module"><span class="has-mr-6">1.1</span> <span>1. Module</span></a></li><li><a class="is-flex" href="#2-Scope"><span class="has-mr-6">1.2</span> <span>2. Scope</span></a><ul class="menu-list"><li><a class="is-flex" href="#2-1-Scope-characteristics"><span class="has-mr-6">1.2.1</span> <span>2.1 Scope characteristics</span></a></li><li><a class="is-flex" href="#2-2-Scope-as-Data-Model"><span class="has-mr-6">1.2.2</span> <span>2.2 Scope as Data-Model</span></a></li><li><a class="is-flex" href="#2-3-Scope-Hierarchies"><span class="has-mr-6">1.2.3</span> <span>2.3 Scope Hierarchies</span></a></li><li><a class="is-flex" href="#2-4-Scope-Life-Cycle"><span class="has-mr-6">1.2.4</span> <span>2.4 Scope Life Cycle</span></a></li></ul></li><li><a class="is-flex" href="#3-Controller"><span class="has-mr-6">1.3</span> <span>3. Controller</span></a></li><li><a class="is-flex" href="#4-Directive"><span class="has-mr-6">1.4</span> <span>4. Directive</span></a><ul class="menu-list"><li><a class="is-flex" href="#4-1-Creating-Directives"><span class="has-mr-6">1.4.1</span> <span>4.1 Creating Directives</span></a></li><li><a class="is-flex" href="#Template-expanding-directive"><span class="has-mr-6">1.4.2</span> <span>Template-expanding directive</span></a></li></ul></li><li><a class="is-flex" href="#6-Filter"><span class="has-mr-6">1.5</span> <span>6. Filter</span></a><ul class="menu-list"><li><a class="is-flex" href="#When-filters-are-executed"><span class="has-mr-6">1.5.1</span> <span>When filters are executed</span></a></li><li><a class="is-flex" href="#Filter-components-in-ng"><span class="has-mr-6">1.5.2</span> <span>Filter components in ng</span></a></li></ul></li><li><a class="is-flex" href="#7-Service"><span class="has-mr-6">1.6</span> <span>7. Service</span></a><ul class="menu-list"><li><a class="is-flex" href="#Service-components-in-ng"><span class="has-mr-6">1.6.1</span> <span>Service components in ng</span></a></li></ul></li></ul></li><li><a class="is-flex" href="#More"><span class="has-mr-6">2</span> <span>More</span></a></li><li><a class="is-flex" href="#undefined"><span class="has-mr-6">3</span> <span>推荐文章（由hexo文章推荐插件驱动）</span></a></li></ul></div></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">分类</h3><ul class="menu-list"><li><a class="level is-marginless" href="/categories/AI/"><span class="level-start"><span class="level-item">AI</span> </span><span class="level-end"><span class="level-item tag">20</span></span></a><ul><li><a class="level is-marginless" href="/categories/AI/Machine-Learning/"><span class="level-start"><span class="level-item">Machine Learning</span> </span><span class="level-end"><span class="level-item tag">6</span></span></a></li><li><a class="level is-marginless" href="/categories/AI/Mathematics/"><span class="level-start"><span class="level-item">Mathematics</span> </span><span class="level-end"><span class="level-item tag">9</span></span></a></li><li><a class="level is-marginless" href="/categories/AI/NLP/"><span class="level-start"><span class="level-item">NLP</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-marginless" href="/categories/AI/%E5%85%AC%E5%BC%8F%E6%8E%A8%E5%AF%BC/"><span class="level-start"><span class="level-item">公式推导</span> </span><span class="level-end"><span class="level-item tag">4</span></span></a></li></ul></li><li><a class="level is-marginless" href="/categories/CheatSheets/"><span class="level-start"><span class="level-item">CheatSheets</span> </span><span class="level-end"><span class="level-item tag">4</span></span></a></li><li><a class="level is-marginless" href="/categories/DevOps/"><span class="level-start"><span class="level-item">DevOps</span> </span><span class="level-end"><span class="level-item tag">8</span></span></a><ul><li><a class="level is-marginless" href="/categories/DevOps/Anti-patterns/"><span class="level-start"><span class="level-item">Anti-patterns</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-marginless" href="/categories/DevOps/Concept/"><span class="level-start"><span class="level-item">Concept</span> </span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-marginless" href="/categories/DevOps/Continuous-Delivery/"><span class="level-start"><span class="level-item">Continuous Delivery</span> </span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-marginless" href="/categories/DevOps/TeamWorks/"><span class="level-start"><span class="level-item">TeamWorks</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-marginless" href="/categories/DevOps/Testing/"><span class="level-start"><span class="level-item">Testing</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-marginless" href="/categories/Development/"><span class="level-start"><span class="level-item">Development</span> </span><span class="level-end"><span class="level-item tag">33</span></span></a><ul><li><a class="level is-marginless" href="/categories/Development/Integrated/"><span class="level-start"><span class="level-item">Integrated</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-marginless" href="/categories/Development/JavaScript/"><span class="level-start"><span class="level-item">JavaScript</span> </span><span class="level-end"><span class="level-item tag">18</span></span></a></li><li><a class="level is-marginless" href="/categories/Development/Native/"><span class="level-start"><span class="level-item">Native</span> </span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-marginless" href="/categories/Development/Python/"><span class="level-start"><span class="level-item">Python</span> </span><span class="level-end"><span class="level-item tag">9</span></span></a></li><li><a class="level is-marginless" href="/categories/Development/React/"><span class="level-start"><span class="level-item">React</span> </span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-marginless" href="/categories/Development/html5/"><span class="level-start"><span class="level-item">html5</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-marginless" href="/categories/Operations/"><span class="level-start"><span class="level-item">Operations</span> </span><span class="level-end"><span class="level-item tag">18</span></span></a><ul><li><a class="level is-marginless" href="/categories/Operations/Nginx/"><span class="level-start"><span class="level-item">Nginx</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-marginless" href="/categories/Operations/OpenStack/"><span class="level-start"><span class="level-item">OpenStack</span> </span><span class="level-end"><span class="level-item tag">14</span></span></a></li><li><a class="level is-marginless" href="/categories/Operations/System/"><span class="level-start"><span class="level-item">System</span> </span><span class="level-end"><span class="level-item tag">3</span></span></a></li></ul></li><li><a class="level is-marginless" href="/categories/Reading-Writing/"><span class="level-start"><span class="level-item">Reading&Writing</span> </span><span class="level-end"><span class="level-item tag">3</span></span></a><ul><li><a class="level is-marginless" href="/categories/Reading-Writing/Hexo/"><span class="level-start"><span class="level-item">Hexo</span> </span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-marginless" href="/categories/Reading-Writing/LaTeX/"><span class="level-start"><span class="level-item">LaTeX</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li></ul></div></div></div><div class="card widget"><div class="card-content"><h3 class="menu-label">标签云</h3><a href="/tags/Agile/" style="font-size:10px">Agile</a> <a href="/tags/Angularjs/" style="font-size:11.11px">Angularjs</a> <a href="/tags/Animation/" style="font-size:10px">Animation</a> <a href="/tags/Application/" style="font-size:10px">Application</a> <a href="/tags/Artificial-Intelligence/" style="font-size:10px">Artificial Intelligence</a> <a href="/tags/BP/" style="font-size:10px">BP</a> <a href="/tags/Bokeh/" style="font-size:10px">Bokeh</a> <a href="/tags/Book/" style="font-size:10px">Book</a> <a href="/tags/C4-5/" style="font-size:10px">C4.5</a> <a href="/tags/CART/" style="font-size:10px">CART</a> <a href="/tags/CD/" style="font-size:10px">CD</a> <a href="/tags/CLI/" style="font-size:10px">CLI</a> <a href="/tags/CSS/" style="font-size:10px">CSS</a> <a href="/tags/CentOS/" style="font-size:11.11px">CentOS</a> <a href="/tags/Cinder/" style="font-size:10px">Cinder</a> <a href="/tags/Clipboardjs/" style="font-size:10px">Clipboardjs</a> <a href="/tags/Concept/" style="font-size:10px">Concept</a> <a href="/tags/Continuous-Delivery/" style="font-size:10px">Continuous Delivery</a> <a href="/tags/DeepLearning/" style="font-size:16.67px">DeepLearning</a> <a href="/tags/Department/" style="font-size:11.11px">Department</a> <a href="/tags/DevOps/" style="font-size:17.78px">DevOps</a> <a href="/tags/Develop/" style="font-size:13.33px">Develop</a> <a href="/tags/Development/" style="font-size:20px">Development</a> <a href="/tags/Directive/" style="font-size:10px">Directive</a> <a href="/tags/Distribution/" style="font-size:10px">Distribution</a> <a href="/tags/Django/" style="font-size:12.22px">Django</a> <a href="/tags/Document/" style="font-size:10px">Document</a> <a href="/tags/ES5/" style="font-size:10px">ES5</a> <a href="/tags/ES6/" style="font-size:10px">ES6</a> <a href="/tags/Echarts/" style="font-size:10px">Echarts</a> <a href="/tags/Engine/" style="font-size:10px">Engine</a> <a href="/tags/Entropy/" style="font-size:10px">Entropy</a> <a href="/tags/Filter/" style="font-size:10px">Filter</a> <a href="/tags/Front-End/" style="font-size:10px">Front End</a> <a href="/tags/Gallery/" style="font-size:10px">Gallery</a> <a href="/tags/Git/" style="font-size:10px">Git</a> <a href="/tags/Gradient-descent/" style="font-size:10px">Gradient descent</a> <a href="/tags/Hexo/" style="font-size:12.22px">Hexo</a> <a href="/tags/Horizon/" style="font-size:10px">Horizon</a> <a href="/tags/ID3-5/" style="font-size:10px">ID3.5</a> <a href="/tags/Icarus/" style="font-size:10px">Icarus</a> <a href="/tags/JavaScript/" style="font-size:18.89px">JavaScript</a> <a href="/tags/Javascript/" style="font-size:11.11px">Javascript</a> <a href="/tags/KVM/" style="font-size:10px">KVM</a> <a href="/tags/LaTeX/" style="font-size:10px">LaTeX</a> <a href="/tags/LibreOffice/" style="font-size:10px">LibreOffice</a> <a href="/tags/Linux/" style="font-size:10px">Linux</a> <a href="/tags/Machine-Learning/" style="font-size:11.11px">Machine Learning</a> <a href="/tags/Matrix/" style="font-size:10px">Matrix</a> <a href="/tags/MiddleWare/" style="font-size:10px">MiddleWare</a> <a href="/tags/Module/" style="font-size:10px">Module</a> <a href="/tags/Network/" style="font-size:10px">Network</a> <a href="/tags/Nginx/" style="font-size:10px">Nginx</a> <a href="/tags/NodeJS/" style="font-size:11.11px">NodeJS</a> <a href="/tags/OOP/" style="font-size:10px">OOP</a> <a href="/tags/OpenStack/" style="font-size:17.78px">OpenStack</a> <a href="/tags/OpenStackApi/" style="font-size:14.44px">OpenStackApi</a> <a href="/tags/Operations/" style="font-size:10px">Operations</a> <a href="/tags/Oprations/" style="font-size:11.11px">Oprations</a> <a href="/tags/PDF/" style="font-size:10px">PDF</a> <a href="/tags/Pipline/" style="font-size:10px">Pipline</a> <a href="/tags/Probability/" style="font-size:12.22px">Probability</a> <a href="/tags/Python/" style="font-size:15.56px">Python</a> <a href="/tags/React/" style="font-size:11.11px">React</a> <a href="/tags/Relational-algebra/" style="font-size:10px">Relational algebra</a> <a href="/tags/Restful/" style="font-size:10px">Restful</a> <a href="/tags/Route/" style="font-size:10px">Route</a> <a href="/tags/SVD/" style="font-size:10px">SVD</a> <a href="/tags/SVM/" style="font-size:11.11px">SVM</a> <a href="/tags/Scalar/" style="font-size:10px">Scalar</a> <a href="/tags/Sigmoid/" style="font-size:10px">Sigmoid</a> <a href="/tags/Team/" style="font-size:10px">Team</a> <a href="/tags/Tempest/" style="font-size:10px">Tempest</a> <a href="/tags/Tensor/" style="font-size:10px">Tensor</a> <a href="/tags/Testing/" style="font-size:10px">Testing</a> <a href="/tags/Time/" style="font-size:10px">Time</a> <a href="/tags/TimeMachine/" style="font-size:10px">TimeMachine</a> <a href="/tags/Tips/" style="font-size:10px">Tips</a> <a href="/tags/Vector/" style="font-size:10px">Vector</a> <a href="/tags/Vmware/" style="font-size:10px">Vmware</a> <a href="/tags/Vue/" style="font-size:17.78px">Vue</a> <a href="/tags/Vuex/" style="font-size:10px">Vuex</a> <a href="/tags/WSGI/" style="font-size:10px">WSGI</a> <a href="/tags/Web/" style="font-size:10px">Web</a> <a href="/tags/Word-Cut/" style="font-size:10px">Word Cut</a> <a href="/tags/aliyun/" style="font-size:10px">aliyun</a> <a href="/tags/auth/" style="font-size:10px">auth</a> <a href="/tags/babel/" style="font-size:10px">babel</a> <a href="/tags/certbot/" style="font-size:10px">certbot</a> <a href="/tags/decision-tree/" style="font-size:10px">decision tree</a> <a href="/tags/homebrew/" style="font-size:10px">homebrew</a> <a href="/tags/jwt/" style="font-size:10px">jwt</a> <a href="/tags/keystone/" style="font-size:11.11px">keystone</a> <a href="/tags/loader/" style="font-size:10px">loader</a> <a href="/tags/mathematics/" style="font-size:11.11px">mathematics</a> <a href="/tags/migrate/" style="font-size:10px">migrate</a> <a href="/tags/openstack/" style="font-size:10px">openstack</a> <a href="/tags/pdf2html/" style="font-size:10px">pdf2html</a> <a href="/tags/pm2/" style="font-size:10px">pm2</a> <a href="/tags/singular-value-decomposition/" style="font-size:10px">singular value decomposition</a> <a href="/tags/vue-router/" style="font-size:11.11px">vue-router</a> <a href="/tags/vue-ssr/" style="font-size:10px">vue-ssr</a> <a href="/tags/webpack/" style="font-size:10px">webpack</a> <a href="/tags/%E4%BD%8E%E9%80%9A%E6%BB%A4%E6%B3%A2%E5%99%A8/" style="font-size:10px">低通滤波器</a> <a href="/tags/%E5%85%A5%E9%97%A8/" style="font-size:10px">入门</a> <a href="/tags/%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F/" style="font-size:10px">全局变量</a> <a href="/tags/%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1/" style="font-size:10px">全局对象</a> <a href="/tags/%E5%85%A8%E6%A0%88/" style="font-size:10px">全栈</a> <a href="/tags/%E5%85%AC%E5%BC%8F/" style="font-size:12.22px">公式</a> <a href="/tags/%E5%86%B3%E7%AD%96%E6%A0%91/" style="font-size:10px">决策树</a> <a href="/tags/%E5%87%BD%E6%95%B0/" style="font-size:10px">函数</a> <a href="/tags/%E5%88%86%E7%B1%BB%E5%99%A8/" style="font-size:10px">分类器</a> <a href="/tags/%E5%8A%A0%E9%80%9F/" style="font-size:10px">加速</a> <a href="/tags/%E5%8C%B9%E9%85%8D%E6%BB%A4%E6%B3%A2%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/" style="font-size:10px">匹配滤波边缘检测</a> <a href="/tags/%E5%8D%B7%E7%A7%AF/" style="font-size:10px">卷积</a> <a href="/tags/%E5%8D%B7%E7%A7%AF%E6%A0%B8/" style="font-size:10px">卷积核</a> <a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size:10px">原型链</a> <a href="/tags/%E5%8F%8D%E5%90%91%E4%BC%A0%E6%92%AD/" style="font-size:10px">反向传播</a> <a href="/tags/%E5%8F%98%E9%87%8F%E7%B1%BB%E5%9E%8B/" style="font-size:10px">变量类型</a> <a href="/tags/%E5%AE%98%E6%96%B9%E7%A4%BA%E4%BE%8B/" style="font-size:10px">官方示例</a> <a href="/tags/%E5%AF%B9%E5%81%B6%E5%BD%A2%E5%BC%8F/" style="font-size:10px">对偶形式</a> <a href="/tags/%E5%AF%B9%E8%B1%A1/" style="font-size:10px">对象</a> <a href="/tags/%E5%B9%B3%E7%A7%BB%E5%92%8C%E6%9F%A5%E5%88%86%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/" style="font-size:10px">平移和查分边缘检测</a> <a href="/tags/%E6%8B%89%E6%A0%BC%E6%9C%97%E6%97%A5%E4%B9%98%E5%AD%90%E6%B3%95/" style="font-size:10px">拉格朗日乘子法</a> <a href="/tags/%E6%8E%A8%E5%AF%BC/" style="font-size:12.22px">推导</a> <a href="/tags/%E6%8F%90%E4%BA%A4%E9%98%B6%E6%AE%B5/" style="font-size:10px">提交阶段</a> <a href="/tags/%E6%9C%80%E5%A4%A7%E4%BC%BC%E7%84%B6%E4%BC%B0%E8%AE%A1/" style="font-size:10px">最大似然估计</a> <a href="/tags/%E6%9C%80%E5%B0%8F%E4%BA%8C%E4%B9%98%E4%BC%B0%E8%AE%A1/" style="font-size:10px">最小二乘估计</a> <a href="/tags/%E6%9C%80%E5%B0%8F%E4%BA%8C%E4%B9%98%E6%B3%95/" style="font-size:10px">最小二乘法</a> <a href="/tags/%E6%9C%B4%E7%B4%A0%E8%B4%9D%E5%8F%B6%E6%96%AF/" style="font-size:10px">朴素贝叶斯</a> <a href="/tags/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/" style="font-size:10px">机器学习</a> <a href="/tags/%E6%9D%A1%E4%BB%B6%E6%A6%82%E7%8E%87/" style="font-size:10px">条件概率</a> <a href="/tags/%E6%A2%AF%E5%BA%A6%E4%B8%8B%E9%99%8D/" style="font-size:11.11px">梯度下降</a> <a href="/tags/%E6%A2%AF%E5%BA%A6%E6%96%B9%E5%90%91%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/" style="font-size:10px">梯度方向边缘检测</a> <a href="/tags/%E6%A6%82%E5%BF%B5/" style="font-size:10px">概念</a> <a href="/tags/%E6%A6%82%E7%8E%87/" style="font-size:10px">概率</a> <a href="/tags/%E6%B1%82%E5%AF%BC/" style="font-size:10px">求导</a> <a href="/tags/%E6%B5%81%E7%A8%8B/" style="font-size:10px">流程</a> <a href="/tags/%E7%86%B5/" style="font-size:10px">熵</a> <a href="/tags/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" style="font-size:10px">生命周期</a> <a href="/tags/%E7%9F%A9%E9%98%B5/" style="font-size:10px">矩阵</a> <a href="/tags/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/" style="font-size:10px">神经网络</a> <a href="/tags/%E7%A7%81%E6%9C%89%E5%AF%B9%E8%B1%A1/" style="font-size:10px">私有对象</a> <a href="/tags/%E7%B1%BB/" style="font-size:10px">类</a> <a href="/tags/%E7%BA%BF%E6%80%A7%E5%9B%9E%E5%BD%92/" style="font-size:10px">线性回归</a> <a href="/tags/%E8%81%94%E5%90%88%E6%A6%82%E7%8E%87/" style="font-size:10px">联合概率</a> <a href="/tags/%E8%B4%9D%E5%8F%B6%E6%96%AF%E5%88%A4%E5%AE%9A%E5%87%86%E5%88%99/" style="font-size:10px">贝叶斯判定准则</a> <a href="/tags/%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/" style="font-size:10px">边缘检测</a> <a href="/tags/%E8%BE%B9%E9%99%85%E6%A6%82%E7%8E%87/" style="font-size:10px">边际概率</a> <a href="/tags/%E9%97%AD%E5%8C%85/" style="font-size:10px">闭包</a> <a href="/tags/%E9%97%B4%E9%9A%94/" style="font-size:11.11px">间隔</a> <a href="/tags/%E9%AB%98%E6%96%AF%E5%88%86%E5%B8%83/" style="font-size:10px">高斯分布</a> <a href="/tags/%E9%AB%98%E9%80%9A%E6%BB%A4%E6%B3%A2%E5%99%A8/" style="font-size:10px">高通滤波器</a></div></div><div class="column-right-shadow"><div class="card widget"><div class="card-content"><h3 class="menu-label">最新文章</h3><article class="media"><a href="/2019-11-24/4adcf99c.html" class="media-left"><p class="image is-64x64"><img class="thumbnail" src="https://imgs.borgor.cn/imgs/20191124220507.png" alt="JavaScript闭包到底解决了什么问题？"></p></a><div class="media-content"><div class="content"><div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-11-24T12:42:13.000Z">2019-11-24</time></div><a href="/2019-11-24/4adcf99c.html" class="has-link-black-ter is-size-6">JavaScript闭包到底解决了什么问题？</a><p class="is-size-7 is-uppercase"><a class="has-link-grey -link" href="/categories/Development/">Development</a> / <a class="has-link-grey -link" href="/categories/Development/JavaScript/">JavaScript</a></p></div></div></article><article class="media"><a href="/2019-11-22/f971e187.html" class="media-left"><p class="image is-64x64"><img class="thumbnail" src="https://imgs.borgor.cn/imgs/20191122161153.png" alt="JavaScript中对象的生命周期"></p></a><div class="media-content"><div class="content"><div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-11-22T06:04:32.000Z">2019-11-22</time></div><a href="/2019-11-22/f971e187.html" class="has-link-black-ter is-size-6">JavaScript中对象的生命周期</a><p class="is-size-7 is-uppercase"><a class="has-link-grey -link" href="/categories/Development/">Development</a> / <a class="has-link-grey -link" href="/categories/Development/JavaScript/">JavaScript</a></p></div></div></article><article class="media"><a href="/2019-11-21/c07cc943.html" class="media-left"><p class="image is-64x64"><img class="thumbnail" src="https://imgs.borgor.cn/imgs/20191121175758.png" alt="React官方示例中的小游戏示例"></p></a><div class="media-content"><div class="content"><div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-11-21T09:56:03.000Z">2019-11-21</time></div><a href="/2019-11-21/c07cc943.html" class="has-link-black-ter is-size-6">React官方示例中的小游戏示例</a><p class="is-size-7 is-uppercase"><a class="has-link-grey -link" href="/categories/Development/">Development</a> / <a class="has-link-grey -link" href="/categories/Development/React/">React</a></p></div></div></article><article class="media"><a href="/2019-11-21/769edcc6.html" class="media-left"><p class="image is-64x64"><img class="thumbnail" src="https://imgs.borgor.cn/imgs/20191121141128.png" alt="JavaScript引擎的工作原理探析"></p></a><div class="media-content"><div class="content"><div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-11-21T00:30:12.000Z">2019-11-21</time></div><a href="/2019-11-21/769edcc6.html" class="has-link-black-ter is-size-6">JavaScript引擎的工作原理探析</a><p class="is-size-7 is-uppercase"><a class="has-link-grey -link" href="/categories/Development/">Development</a> / <a class="has-link-grey -link" href="/categories/Development/JavaScript/">JavaScript</a></p></div></div></article><article class="media"><a href="/2019-11-19/290f6390.html" class="media-left"><p class="image is-64x64"><img class="thumbnail" src="https://imgs.borgor.cn/imgs/20191119100237.png" alt="深入了解JavaScript中的基本变量类型"></p></a><div class="media-content"><div class="content"><div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-11-19T04:22:33.000Z">2019-11-19</time></div><a href="/2019-11-19/290f6390.html" class="has-link-black-ter is-size-6">深入了解JavaScript中的基本变量类型</a><p class="is-size-7 is-uppercase"><a class="has-link-grey -link" href="/categories/Development/">Development</a> / <a class="has-link-grey -link" href="/categories/Development/JavaScript/">JavaScript</a></p></div></div></article></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">归档</h3><ul class="menu-list"><li><a class="level is-marginless" href="/archives/2019/11/"><span class="level-start"><span class="level-item">十一月 2019</span> </span><span class="level-end"><span class="level-item tag">7</span></span></a></li><li><a class="level is-marginless" href="/archives/2019/10/"><span class="level-start"><span class="level-item">十月 2019</span> </span><span class="level-end"><span class="level-item tag">8</span></span></a></li><li><a class="level is-marginless" href="/archives/2019/09/"><span class="level-start"><span class="level-item">九月 2019</span> </span><span class="level-end"><span class="level-item tag">5</span></span></a></li><li><a class="level is-marginless" href="/archives/2019/08/"><span class="level-start"><span class="level-item">八月 2019</span> </span><span class="level-end"><span class="level-item tag">13</span></span></a></li><li><a class="level is-marginless" href="/archives/2019/07/"><span class="level-start"><span class="level-item">七月 2019</span> </span><span class="level-end"><span class="level-item tag">15</span></span></a></li><li><a class="level is-marginless" href="/archives/2019/06/"><span class="level-start"><span class="level-item">六月 2019</span> </span><span class="level-end"><span class="level-item tag">11</span></span></a></li><li><a class="level is-marginless" href="/archives/2018/07/"><span class="level-start"><span class="level-item">七月 2018</span> </span><span class="level-end"><span class="level-item tag">4</span></span></a></li><li><a class="level is-marginless" href="/archives/2018/06/"><span class="level-start"><span class="level-item">六月 2018</span> </span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-marginless" href="/archives/2017/12/"><span class="level-start"><span class="level-item">十二月 2017</span> </span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-marginless" href="/archives/2017/11/"><span class="level-start"><span class="level-item">十一月 2017</span> </span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-marginless" href="/archives/2017/10/"><span class="level-start"><span class="level-item">十月 2017</span> </span><span class="level-end"><span class="level-item tag">5</span></span></a></li><li><a class="level is-marginless" href="/archives/2017/09/"><span class="level-start"><span class="level-item">九月 2017</span> </span><span class="level-end"><span class="level-item tag">10</span></span></a></li></ul></div></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">标签</h3><div class="field is-grouped is-grouped-multiline"><div class="control"><a class="tags has-addons" href="/tags/Agile/"><span class="tag">Agile</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Angularjs/"><span class="tag">Angularjs</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Animation/"><span class="tag">Animation</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Application/"><span class="tag">Application</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Artificial-Intelligence/"><span class="tag">Artificial Intelligence</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/BP/"><span class="tag">BP</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Bokeh/"><span class="tag">Bokeh</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Book/"><span class="tag">Book</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/C4-5/"><span class="tag">C4.5</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CART/"><span class="tag">CART</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CD/"><span class="tag">CD</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CLI/"><span class="tag">CLI</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CSS/"><span class="tag">CSS</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CentOS/"><span class="tag">CentOS</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Cinder/"><span class="tag">Cinder</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Clipboardjs/"><span class="tag">Clipboardjs</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Concept/"><span class="tag">Concept</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Continuous-Delivery/"><span class="tag">Continuous Delivery</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/DeepLearning/"><span class="tag">DeepLearning</span> <span class="tag is-grey">7</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Department/"><span class="tag">Department</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/DevOps/"><span class="tag">DevOps</span> <span class="tag is-grey">8</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Develop/"><span class="tag">Develop</span> <span class="tag is-grey">4</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Development/"><span class="tag">Development</span> <span class="tag is-grey">16</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Directive/"><span class="tag">Directive</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Distribution/"><span class="tag">Distribution</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Django/"><span class="tag">Django</span> <span class="tag is-grey">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Document/"><span class="tag">Document</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/ES5/"><span class="tag">ES5</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/ES6/"><span class="tag">ES6</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Echarts/"><span class="tag">Echarts</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Engine/"><span class="tag">Engine</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Entropy/"><span class="tag">Entropy</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Filter/"><span class="tag">Filter</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Front-End/"><span class="tag">Front End</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Gallery/"><span class="tag">Gallery</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Git/"><span class="tag">Git</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Gradient-descent/"><span class="tag">Gradient descent</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Hexo/"><span class="tag">Hexo</span> <span class="tag is-grey">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Horizon/"><span class="tag">Horizon</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/ID3-5/"><span class="tag">ID3.5</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Icarus/"><span class="tag">Icarus</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/JavaScript/"><span class="tag">JavaScript</span> <span class="tag is-grey">9</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Javascript/"><span class="tag">Javascript</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/KVM/"><span class="tag">KVM</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/LaTeX/"><span class="tag">LaTeX</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/LibreOffice/"><span class="tag">LibreOffice</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Linux/"><span class="tag">Linux</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Machine-Learning/"><span class="tag">Machine Learning</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Matrix/"><span class="tag">Matrix</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/MiddleWare/"><span class="tag">MiddleWare</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Module/"><span class="tag">Module</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Network/"><span class="tag">Network</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Nginx/"><span class="tag">Nginx</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/NodeJS/"><span class="tag">NodeJS</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/OOP/"><span class="tag">OOP</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/OpenStack/"><span class="tag">OpenStack</span> <span class="tag is-grey">8</span></a></div><div class="control"><a class="tags has-addons" href="/tags/OpenStackApi/"><span class="tag">OpenStackApi</span> <span class="tag is-grey">5</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Operations/"><span class="tag">Operations</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Oprations/"><span class="tag">Oprations</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/PDF/"><span class="tag">PDF</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Pipline/"><span class="tag">Pipline</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Probability/"><span class="tag">Probability</span> <span class="tag is-grey">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Python/"><span class="tag">Python</span> <span class="tag is-grey">6</span></a></div><div class="control"><a class="tags has-addons" href="/tags/React/"><span class="tag">React</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Relational-algebra/"><span class="tag">Relational algebra</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Restful/"><span class="tag">Restful</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Route/"><span class="tag">Route</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/SVD/"><span class="tag">SVD</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/SVM/"><span class="tag">SVM</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Scalar/"><span class="tag">Scalar</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Sigmoid/"><span class="tag">Sigmoid</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Team/"><span class="tag">Team</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Tempest/"><span class="tag">Tempest</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Tensor/"><span class="tag">Tensor</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Testing/"><span class="tag">Testing</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Time/"><span class="tag">Time</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/TimeMachine/"><span class="tag">TimeMachine</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Tips/"><span class="tag">Tips</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vector/"><span class="tag">Vector</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vmware/"><span class="tag">Vmware</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vue/"><span class="tag">Vue</span> <span class="tag is-grey">8</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vuex/"><span class="tag">Vuex</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/WSGI/"><span class="tag">WSGI</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Web/"><span class="tag">Web</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Word-Cut/"><span class="tag">Word Cut</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/aliyun/"><span class="tag">aliyun</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/auth/"><span class="tag">auth</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/babel/"><span class="tag">babel</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/certbot/"><span class="tag">certbot</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/decision-tree/"><span class="tag">decision tree</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/homebrew/"><span class="tag">homebrew</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/jwt/"><span class="tag">jwt</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/keystone/"><span class="tag">keystone</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/loader/"><span class="tag">loader</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/mathematics/"><span class="tag">mathematics</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/migrate/"><span class="tag">migrate</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/openstack/"><span class="tag">openstack</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/pdf2html/"><span class="tag">pdf2html</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/pm2/"><span class="tag">pm2</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/singular-value-decomposition/"><span class="tag">singular value decomposition</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/vue-router/"><span class="tag">vue-router</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/vue-ssr/"><span class="tag">vue-ssr</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/webpack/"><span class="tag">webpack</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E4%BD%8E%E9%80%9A%E6%BB%A4%E6%B3%A2%E5%99%A8/"><span class="tag">低通滤波器</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%85%A5%E9%97%A8/"><span class="tag">入门</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F/"><span class="tag">全局变量</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1/"><span class="tag">全局对象</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%85%A8%E6%A0%88/"><span class="tag">全栈</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%85%AC%E5%BC%8F/"><span class="tag">公式</span> <span class="tag is-grey">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%86%B3%E7%AD%96%E6%A0%91/"><span class="tag">决策树</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%87%BD%E6%95%B0/"><span class="tag">函数</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%88%86%E7%B1%BB%E5%99%A8/"><span class="tag">分类器</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8A%A0%E9%80%9F/"><span class="tag">加速</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8C%B9%E9%85%8D%E6%BB%A4%E6%B3%A2%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/"><span class="tag">匹配滤波边缘检测</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8D%B7%E7%A7%AF/"><span class="tag">卷积</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8D%B7%E7%A7%AF%E6%A0%B8/"><span class="tag">卷积核</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/"><span class="tag">原型链</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8F%8D%E5%90%91%E4%BC%A0%E6%92%AD/"><span class="tag">反向传播</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8F%98%E9%87%8F%E7%B1%BB%E5%9E%8B/"><span class="tag">变量类型</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%AE%98%E6%96%B9%E7%A4%BA%E4%BE%8B/"><span class="tag">官方示例</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%AF%B9%E5%81%B6%E5%BD%A2%E5%BC%8F/"><span class="tag">对偶形式</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%AF%B9%E8%B1%A1/"><span class="tag">对象</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%B9%B3%E7%A7%BB%E5%92%8C%E6%9F%A5%E5%88%86%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/"><span class="tag">平移和查分边缘检测</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%8B%89%E6%A0%BC%E6%9C%97%E6%97%A5%E4%B9%98%E5%AD%90%E6%B3%95/"><span class="tag">拉格朗日乘子法</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%8E%A8%E5%AF%BC/"><span class="tag">推导</span> <span class="tag is-grey">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%8F%90%E4%BA%A4%E9%98%B6%E6%AE%B5/"><span class="tag">提交阶段</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9C%80%E5%A4%A7%E4%BC%BC%E7%84%B6%E4%BC%B0%E8%AE%A1/"><span class="tag">最大似然估计</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9C%80%E5%B0%8F%E4%BA%8C%E4%B9%98%E4%BC%B0%E8%AE%A1/"><span class="tag">最小二乘估计</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9C%80%E5%B0%8F%E4%BA%8C%E4%B9%98%E6%B3%95/"><span class="tag">最小二乘法</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9C%B4%E7%B4%A0%E8%B4%9D%E5%8F%B6%E6%96%AF/"><span class="tag">朴素贝叶斯</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/"><span class="tag">机器学习</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9D%A1%E4%BB%B6%E6%A6%82%E7%8E%87/"><span class="tag">条件概率</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%A2%AF%E5%BA%A6%E4%B8%8B%E9%99%8D/"><span class="tag">梯度下降</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%A2%AF%E5%BA%A6%E6%96%B9%E5%90%91%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/"><span class="tag">梯度方向边缘检测</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%A6%82%E5%BF%B5/"><span class="tag">概念</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%A6%82%E7%8E%87/"><span class="tag">概率</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%B1%82%E5%AF%BC/"><span class="tag">求导</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%B5%81%E7%A8%8B/"><span class="tag">流程</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%86%B5/"><span class="tag">熵</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/"><span class="tag">生命周期</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%9F%A9%E9%98%B5/"><span class="tag">矩阵</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/"><span class="tag">神经网络</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%A7%81%E6%9C%89%E5%AF%B9%E8%B1%A1/"><span class="tag">私有对象</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%B1%BB/"><span class="tag">类</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%BA%BF%E6%80%A7%E5%9B%9E%E5%BD%92/"><span class="tag">线性回归</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%81%94%E5%90%88%E6%A6%82%E7%8E%87/"><span class="tag">联合概率</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%B4%9D%E5%8F%B6%E6%96%AF%E5%88%A4%E5%AE%9A%E5%87%86%E5%88%99/"><span class="tag">贝叶斯判定准则</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/"><span class="tag">边缘检测</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%BE%B9%E9%99%85%E6%A6%82%E7%8E%87/"><span class="tag">边际概率</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E9%97%AD%E5%8C%85/"><span class="tag">闭包</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E9%97%B4%E9%9A%94/"><span class="tag">间隔</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E9%AB%98%E6%96%AF%E5%88%86%E5%B8%83/"><span class="tag">高斯分布</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E9%AB%98%E9%80%9A%E6%BB%A4%E6%B3%A2%E5%99%A8/"><span class="tag">高通滤波器</span> <span class="tag is-grey">1</span></a></div></div></div></div></div></div></div></div></div></section><footer class="footer"><div class="container"><div class="level"><div class="level-start has-text-centered-mobile"><a class="footer-logo is-block has-mb-6" href="/"><img src="https://imgs.borgor.cn/imgs20190625111723.jpg" alt="AngularJS的基本架构与相关概念" height="28"></a><p class="is-size-7">&copy; 2017-2019 Cyrusky&nbsp; Powered by <a href="https://hexo.io/" target="_blank">Hexo</a> & <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank">Icarus</a><br><span id="busuanzi_container_site_uv">共<span id="busuanzi_value_site_uv">0</span>个访客</span><br><a target="_blank" href="https://icp.chinaz.com/info?q=borgor.cn">陇ICP备19002255号</a></p></div><div class="level-end"><div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle"><p class="control"><a class="button is-white is-large" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a></p><p class="control"><a class="button is-white is-large" target="_blank" title="Attribution 4.0 International" href="https://creativecommons.org/licenses/by/4.0/"><i class="fab fa-creative-commons-by"></i></a></p><p class="control"><a class="button is-white is-large" target="_blank" title="Download on GitHub" href="https://github.com/ppoffice/hexo-theme-icarus"><i class="fab fa-github"></i></a></p></div></div></div></div></footer><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script><script>moment.locale("zh-CN")</script><script src="/js/animation.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.8/js/lightgallery.min.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/js/jquery.justifiedGallery.min.js" defer></script><script src="/js/gallery.js" defer></script><div id="outdated"><h6>Your browser is out-of-date!</h6><p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/" target="_blank" rel="noopener">Update my browser now</a></p><p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p></div><script src="https://cdnjs.cloudflare.com/ajax/libs/outdated-browser/1.1.5/outdatedbrowser.min.js" defer></script><script>document.addEventListener("DOMContentLoaded",function(){outdatedBrowser({bgColor:"#f25648",color:"#ffffff",lowerThan:"flex"})})</script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" defer></script><script>document.addEventListener("DOMContentLoaded",function(){MathJax.Hub.Config({"HTML-CSS":{matchFontHeight:!1},SVG:{matchFontHeight:!1},CommonHTML:{matchFontHeight:!1},tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]]}})})</script><a id="back-to-top" title="回到顶端" href="javascript:;" target="_blank" rel="noopener"><i class="fas fa-chevron-up"></i></a><script src="/js/back-to-top.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" defer></script><script src="/js/clipboard.js" defer></script><script src="/js/main.js" defer></script><div class="searchbox ins-search"><div class="searchbox-container ins-search-container"><div class="searchbox-input-wrapper"><input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..."> <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span></div><div class="searchbox-result-wrapper ins-section-wrapper"><div class="ins-section-container"></div></div></div></div><script>!function(T){var N={TRANSLATION:{POSTS:"文章",PAGES:"页面",CATEGORIES:"分类",TAGS:"标签",UNTITLED:"(无标题)"},CONTENT_URL:"/content.json"};T.INSIGHT_CONFIG=N}(window)</script><script src="/js/insight.js" defer></script><link rel="stylesheet" href="/css/search.css"><link rel="stylesheet" href="/css/insight.css"></body></html><!-- rebuild by neat -->